/**
 * 
 * div
 * https://www.w3school.com.cn/tags/tag_div.asp
 * ---------
 * 
 * div 全部属性
 * https://www.w3school.com.cn/tags/html_ref_standardattributes.asp
 */

import React, { Component } from 'react'
import GetImg from '../../asstes/Images'

export default class Index extends Component {
  // constructor(props) {
  //   super(props)
  // }

  onClick = (ref=null) => {
    let backColor = ref.style.backgroundColor;
    if(backColor !== 'yellow') {
      ref.style.backgroundColor='yellow';
    } 
    else {
      ref.style.backgroundColor='white';
    }
  }

  render(){
    let tsIcon = GetImg(2);
    return(
      <div>
        {/* 远程图片 */}
        div标签展示：<br />

        <div style={{color: '#00ff00'}}>div文字颜色</div>

        <div style={{ width: 50, height: 50, borderRadius: '3px' ,borderWidth: '10px', borderStyle: 'solid', borderColor: "red", background: `url(${tsIcon}) no-repeat`}}></div>
        <br />
        <div style={{ width: 100, height: 20, border: '2px solid red', backgroundColor: 'blue'}} />

        <div style={{ width: 100, height: 20, backgroundColor: 'blue',
            borderWidth: '10px', borderStyle: 'solid', borderRadius: '10px'
        }} />

        <br />
        <div>
        <div ref={(e)=>this.refKeyboard_1=e} tabIndex="1" onClick={()=>this.onClick(this.refKeyboard_1)}>测试1</div>
        <div tabIndex="2">测试2</div>
        </div>

      </div>
    )
  }
}